<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue props && data</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div id="prop0">
  <child child-message="hello!"></child>
</div>
<script>
  var child = Vue.component('child', {
    // 声明 props
    props: ['child-message'],
    // 就像 data 一样，prop 可以用在模板内
    // 同样也可以在 vm 实例中像 “this.message” 这样使用
    template: '<span>{{ child-message }}</span>'
  })

    var v_onClick = new Vue({
        el: '#prop0',
      components: {
        'child': child
      }
    })
</script>

<hr>
<!--局部component注册-->
  <!--方案一：-->
<div id="parent"></div>
<script>
  var Parent = Vue.extend({
    template: '<div>局部component注册：<br> 直接new一个parent的实例对象 <my-component></my-component></div>',
    components: {
      'my-component': {
        template: '<div>A custom component!</div>'
      } }
  })

//    new的是Parent实例对象，
    new Parent({
      el: '#parent'
    })
</script>

<hr>
<!--局部component注册-->
<!--方案二：在vue里增加 el+components-->
<div id="comp">
  <parentcom></parentcom>
</div>

<script>
  var ChildCom = Vue.extend({
    template: '<div> A ChildCom custom component!</div>'
  })
  var parentCom = Vue.extend({
    template: '<div>局部component注册：<br> 使用Vue中的el+components: <child-component></child-component> </div>',
    components: {
      'child-component': ChildCom
    }
  })

  //  方案二：
  new Vue({
    el: '#comp',
    components: {
      'parentcom': parentCom
    }
  })
</script>
</body>
</html>
